<template>
  <div id="personal-share">
    <div class="share-box">
      <NavBar title="我要分享" left-arrow @click-left="onClickLeft" />
      <div class="sharehead">
        <Divider :style="{ color: '#000', borderColor: '#303133' }"
          >二维码分享</Divider
        >
      </div>
      <div>
        <div class="imgshare">
          <img src="" alt="" />
        </div>
      </div>
      <div class="QRcode">
        <div class="examine">查看二维码</div>
        <div class="save">保存二维码</div>
      </div>
      <div class="sharehead">
        <Divider :style="{ color: '#000', borderColor: '#303133' }"
          >链接分享</Divider
        >
      </div>
      <div class="linkshare">
        <div class="link">https://fwf4we6df4w4f6w4ef6w6ef46we4f6wef6</div>
        <div class="copy">复制</div>
      </div>
       <div class="sharehead">
        <Divider :style="{ color: '#000', borderColor: '#303133' }"
          >您的邀请码</Divider
        >
      </div>
      <div class="Invitationcode">765492</div>
      <div class="Invitationcodecopy">复制</div>
      <div class="hint">
        <p>1:通过以上二维码或者链接进行注册</p>
        <p>2:新人注册时，填写您的邀请码</p>
      </div>
    </div>

  </div>
</template>
<script>
import { NavBar, Divider } from "vant";
export default {
  components: {
    NavBar,
    Divider,
  },

  data() {
    return {};
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 网络请求
  },
};
</script> 
<style lang="less" scoped>
#personal-share {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .sharehead {
    width: 285px;
    margin: 10px 45px;
  }
  .imgshare {
    height: 130px;
    width: 130px;
    margin: 0 auto;
    img {
      width: 130px;
      height: 130px;
    }
  }
  .QRcode {
    display: flex;
    font-size: 16px;
    text-align: center;
    .examine {
      width: 125px;
      height: 45px;
      line-height: 45px;
      border-radius: 30px;
      margin: 12px auto;
      background-color: #588bf8;
      color: #fff;
    }
    .save {
      width: 122px;
      height: 42px;
      border: solid 3px #588bf8;
      line-height: 45px;
      border-radius: 30px;
      margin: 12px auto;
      color: #588bf8;
    }
  }
  .linkshare {
    width: 335px;
    height: 40px;
    margin: 20px;
    font-size: 12px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    padding-left: 15px;
    .link {
      width: 240px;
      height: 40px;
      line-height: 20px;
      word-break: break-all;
    }
    .copy {
      width: 30px;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      position: absolute;
      left: 315px;
      color: #588bf8;
    }
  }
  .Invitationcode {
    text-align: center;
    font-size: 20px;
    margin-top: 30px;
  }
  .Invitationcodecopy {
    font-size: 14px;
    color: #588bf8;
    text-align: center;
    margin-top: 15px;
  }
  .hint {
    font-size: 12px;
    width: 335px;
    margin: 30px 20px;
  }
}
</style>
